﻿<!DOCTYPE html>

<html lang="zh" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>APM追踪</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/jquery-jsonview/1.2.3/jquery.jsonview.min.css" rel="stylesheet">

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-jsonview/1.2.3/jquery.jsonview.min.js"></script>
</head>
<body>
    <h2 class="ml-2">APM简易版可视化追踪UI</h2>
    <h2 class="text text-info ml-2">https://github.com/EmilyEdna</h2>
    <h3 class="text text-danger">---------------------------------------------------------------------</h3>
    <p>字段说明 <abbr class="text text-danger">Channel：1 开始 2 进行中 3 完成</abbr> <abbr class="text text-danger">LayerType：0 Socket 1 HTTP 2 DataBase 3 Method</abbr></p>
    <div id="app">
        <ul class="list-group">
            <li v-for="(Entity,Index) in reslut" class="list-group-item">
                <div data-toggle="collapse" :data-target="GetElement(Index,false)">
                    <small class="text text-info">序号：{{Index+1}}</small>
                    <small class="text text-success" style="margin-left:50px;">{{Entity.OperationName}}</small>
                    <span class="badge badge-pill badge-warning" style="margin-left:100px;">{{Entity.Channel==0?"入口":(Entity.Channel==1?"进行中":"完成")}}_{{Entity.RequirId}}</span>
                </div>
                <div class="collapse" :id="GetElement(Index,true)">
                    <h5 :id="Index" ref="Indexs">{{JSON.stringify(Entity)}}</h5>
                    <button class="btn btn-sm btn-outline-primary" type="button" @click="SerliazeJson(Entity,Index,true)">美化JSON</button>
                    <button class="btn btn-sm btn-outline-primary" type="button" @click="SerliazeJson(Entity,Index,false)">还原JSON</button>
                </div>
            </li>
        </ul>
        <div class="col-sm-12 text-center" style="margin-top:10px;">
            <button type="button" class="btn btn-sm btn-outline-primary" @click="Page(-1,true)">上一页</button>
            <a href="#" style="margin-left:1px;margin-right:1px;" class="text text-danger" v-for="Index in TotalPage" @click="Page(Index,false)"> {{Index}}</a>
            <button type="button" class="btn btn-sm btn-outline-primary" @click="Page(1,true)">下一页</button>
        </div>
    </div>
</body>
</html>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            PageData: {
                PageIndex: 1,
                PageSize: 15
            },
            reslut: {},
            TotalPage: 0,
            CurrentPage: 1,
        },
        created() {
            this.Init();
        },
        methods: {
            Init() {
                axios({
                    url: "/Trace/GetTraceData",
                    method: "post",
                    data: this.PageData
                }).then(res => {
                    this.reslut = res.data.Data.Queryable;
                    this.TotalPage = res.data.Data.TotalPage;
                    this.CurrentPage = res.data.Data.CurrentPage;
                });
                //定时清空内存数据
                setInterval(() => {
                    axios({
                        url: "/Trace/ClearMemory",
                        method: "get"
                    }).then(res => { });
                }, 300000)
            },
            GetElement(Index, flag) {
                return (flag ? "trace_" : "#trace_") + Index;
            },
            SerliazeJson(JsonData, Index, flag) {
                if (flag) {
                    $(document).ready(() => {
                        $("#" + Index).JSONView(JsonData);
                    });
                } else {
                    this.$refs.Indexs[Index].innerHTML = JSON.stringify(JsonData);
                }
            },
            Page(Index, flag) {
                var CurrentPage = this.CurrentPage;
                if (flag) {
                    CurrentPage = CurrentPage + (Index);
                    if (CurrentPage <= 0)
                        CurrentPage = 1;
                    if (CurrentPage > this.TotalPage)
                        CurrentPage = this.TotalPage;
                } else 
                    CurrentPage = Index;
                this.PageData.PageIndex = CurrentPage;
                this.Init();
            }
        }
    });
</script>